<template>
  <div>
    <el-dialog
      title="新建线索池名称"
      :visible.sync="clueflag"
      :close-on-click-modal="false"
      style="width: 100%; height: 100%;padding:0 25%"
    >
<!-- relative  absolute-->
      <el-form :model="clue_name" @submit.native.prevent>
        <el-form-item label="线索池名称:" prop="clue_name">
          <el-input style="width:100%" @blur="createclues()" @keyup.enter.native="clueflag=false" ref="createInputRef" v-model="clue_name.clue_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="clueflag = false" size="small"> 取 消 </el-button>
        <el-button type="primary" @click="createclues()" size="small"
          >添加线索池
        </el-button>
      </div> -->
    </el-dialog>
    <el-dialog
      ref="dialogref"
      class="createclue"
      :class="pointerEventsClue"
      style="width: 80%; height: 100%"
      title="批量转为线索"
      :visible.sync="dialogFormVisibleM"
      :close-on-click-modal="false"
      @before-close="beforeClose"
      @close="closeDialog"
    >
      <el-row :gutter="30">
        <el-col :span="17">
          <div class="rightbox" style="height: 100%">
            <el-form
              ref="disposeConfigsform"
              :model="clueinfo"
              @submit.native.prevent
            >
              <el-form-item label="线索池名称:" prop="clue_name">
                <div class="nameedit">
                  <el-input
                    v-model="clueinfo.clue_name"
                    disabled
                    v-show="markshow"
                  >
                  </el-input>
                  <el-input
                    class="inputclass"
                    ref="inputref"
                    v-show="!markshow"
                    v-model="clueinfo.clue_name"
                    autocomplete="off"
                    @keyup.enter.native="markshow = true"
                    @blur="blurClue"
                    size="small"
                  ></el-input>
                  <span>
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      v-show="!markshow"
                      @click="markshow = true"
                    >
                      确认
                    </el-button>
                  </span>
                </div>
              </el-form-item>
            </el-form>
            <!-- <hr style='background-color:red;height:1px; border:none;' /> -->
            <div class="nameedit" style="display:flex;align-items: center;margin-bottom: 5px">
              <label style="">共选中{{ marklist.length }}条成功留证数据:</label>
              <el-button type="primary" @click="submitclue()" size="small" plain
                >转入线索池
              </el-button>
            </div>
            <el-table
              :data="marklist"
              :highlight-current-row="true"
              :show-header="false"
              :row-class-name="tableRowClassName"
              ref="recordTable"
              :height="tableHeight"
              border
            >
              <el-table-column type="index" width="35"> </el-table-column>
              <el-table-column :show-overflow-tooltip="true">
                <template slot-scope="{ row }">
                  {{ row.title }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="7">
          <!-- 线索池 -->
            <el-row>
            <el-col :span="24"> <el-button
            class="newclue"
            @click="clueClickCreate()"
            type="primary"
            plain
            size="small"
            >新建线索池
          </el-button></el-col>
          </el-row>
          <el-table
            :data="clueTitlelist"
            :highlight-current-row="true"
            :show-header="false"
            :row-class-name="tableRowClassName"
             v-el-table-infinite-scroll="load"
            @row-click="clueClick"
            ref="clueTitlelistRef"
            border
            :height="tableHeightclue"
            :row-style="rowClass"
          >
            <el-table-column :show-overflow-tooltip="true">
              <template slot-scope="{ row, $index }">
                <el-row>
                  <el-col :span="22">
                    <div class="caseList">
                      <el-link :class="'linkClick' + $index" :underline="false">
                        {{ row.clue_name }}
                      </el-link>
                    </div>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        
        </el-col>
      </el-row>
      <el-alert
          v-if="isloading"
          title="正在努力加载中..."
          type="success"
          center
          :closable="false"
          show-icon
        />
        <el-alert
          v-if="noMore"
          title="没有更多啦！"
          type="warning"
          center
          show-icon
        />
    </el-dialog>
  </div>
</template>
<script>
import { createCluename, fetchCluename, createCluelist } from "@/api/clue";
export default {
  props: {
    createMarkVisibleT: {
      type: Boolean,
      default: null,
    },
    marks: {
      type: Array,
      default: null,
    },
  },
  components: {},
  created() {
    this.getcluename();
  },
  watch: {
    // "clueinfo.clue_name": function () {
    //   this.newDate = new Date();
    //   this.$refs["disposeConfigsform"].validate((valid) => {
    //     if (valid) {
    //       //验证通过去除不可点击的class名称
    //       this.pointerEventsClue = null;
    //       if (this.newDate - this.oldDate >= 500) {
    //         console.log(this.newDate - this.oldDate);
    //         console.log("0.5发送请求");
    //       }
    //     } else {
    //       //el-dialog 动态添加class名称  样式禁止点击弹框
    //       this.pointerEventsClue = "pointerEventsClue";
    //     }
    //   });
    //   this.oldDate = this.newDate;
    // },
  },
  data() {
    return {
      old_clue_name: null,
      clueflag: false,
      pointerEventsClue: null,
      tableHeight: 100,
      tableHeightclue:100,
      getIndex: null,
      len: 0,
      tot:0,//总条数
      noMore: false,
      isloading: false,
      markshow: false,
      marklist: [],
      clueinfo: {
        clue_id: null,
        clue_name: null,
        evidences: [],
      },
      clue_name: {
        clue_name: "新建线索池",
      },
      clueTitlelist: [],
      dialogFormVisibleM: false,
      value: "",
        listQuery: {
        page: 1,
        page_size: 10,
      },
    };
  },
  mounted() {
    // this.form.evidence_creater=this.marks.evidence_creater;
    this.marklist = this.marks;
    this.dialogFormVisibleM = this.createMarkVisibleT;
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.tableHeight =
        window.innerHeight - this.$refs.recordTable.$el.offsetTop - (window.innerHeight)*0.3;
        // 侧边线索池的高度
      this.tableHeightclue =
        window.innerHeight - this.$refs.clueTitlelistRef.$el.offsetTop - (window.innerHeight)*0.3 - 36;
      // 监听浏览器高度变化，改变表格高度
      window.onresize = () => {
        this.tableHeight =
          window.innerHeight - this.$refs.recordTable.$el.offsetTop - (window.innerHeight)*0.3;
          this.tableHeightclue =
        window.innerHeight - this.$refs.clueTitlelistRef.$el.offsetTop - (window.innerHeight)*0.3 - 36;
      };
      setTimeout(() => {
        // this.$refs['linkClick0'].$el.click()
        document.getElementsByClassName("linkClick0")[0].click();
      }, 500);
    });
  },
  methods: {
    // 线索池的点击变色样式
    rowClass({ row, rowIndex }) {
      if (this.len === rowIndex) {
        return { background: "#ecf5ff" };
      }
    },
    // 线索池把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 编辑
    clueUpdate() {
      this.markshow = true;
      this.$nextTick(function () {
        this.$refs.inputref.$el.querySelector("input").focus();
      });
    },
    // 线索池的点击事件
    clueClick(row) {
      this.markshow = false;
      this.len = row.index; // 选中行的下标
      this.clueinfo.clue_name = row.clue_name;
      this.old_clue_name=row.clue_name;
      this.clueinfo.clue_id = row.clue_id;
        // 自动聚焦
      this.$nextTick(function () {
        this.$refs.inputref.$el.querySelector("input").focus();
      });
    },
    clueClickCreate() {
      //新建线索池名称
      this.clueflag = true;
      this.$nextTick(function () {
        this.$refs.createInputRef.$el.querySelector("input").focus();
      });
    },
    // 添加线索池
    createclues() {
      createCluename(this.clue_name).then((response) => {
        if (response.code == 2000) {
          this.$notify({
            message: "线索池添加成功",
            type: "success",
            duration: 2000,
          });
          this.getcluename();
          this.clueflag = false;
        }
      });
    },
    blurClue() {
      if (this.clueinfo.clue_name != null && this.clueinfo.clue_name != "") {
        // 如果值未改变 不提交
        if(this.old_clue_name==this.clueinfo.clue_name){
          return;
        }
        createCluelist(this.clueinfo).then((response) => {
          if (response.code == 2000) {
            this.clueTitlelist=[];
             this.getcluename();
            this.markshow = true;
            this.$notify({
              message: "成功修改线索池",
              type: "success",
              duration: 2000,
            });
           
          } else {
            this.markshow = true;
          }
        });
      } else {
        this.$nextTick(() => {
          document.getElementsByClassName("linkClick" + this.len)[0].click();
        });
      }
    },
      load() {
      // this.isloading = true
      // noMore 没有更多
      // isloading   正在加载

      if (this.clueTitlelist.length >= this.tot) {
        this.isloading = false;
        // this.noMore = true
      } else if (
        this.clueTitlelist.length ==
        this.listQuery.page * this.listQuery.page_size
      ) {
        this.listQuery.page++;
        this. getcluename();
      }
      this.isloading = false
    },
    submitclue() {
      this.$refs["disposeConfigsform"].validate((valid) => {
        if (valid) {
          //验证通过去除不可点击的class名称
          this.pointerEventsClue = null;
          // 将id数组添加到 clueinfo 中
           console.log(this.marklist);
           
            this.clueinfo.evidences = JSON.parse(
            JSON.stringify(this.marklist, ["evidence_id"])).map(item=>item.evidence_id)
              console.log(this.clueinfo.evidences);
            
          this.clueinfo.clue_name = null;
          createCluelist(this.clueinfo).then((response) => {
           
            if (response.code == 2000) {
              this.$notify({
                message: "添加到线索池成功",
                type: "success",
                duration: 2000,
              });
            }
          });
          this.dialogFormVisibleM = false;
        } else {
          //el-dialog 动态添加class名称  样式禁止点击弹框
          // this.pointerEventsClue = "pointerEventsClue";
          this.$notify({
            message: "表单提交验证不通过",
            type: "wainning",
            duration: 2000,
          });
          console.log("表单提交验证不通过");
        }
      });
    },
    getcluename() {
       this.loading = true;
      fetchCluename( this.listQuery).then((response) => {
          for (let i in response.data.list) {
          this.clueTitlelist.push(JSON.parse(JSON.stringify(response.data.list[i])));
        }
        //this.clueTitlelist=response.data.list;
        this.tot=response.data.total_num;
        console.log(this.tot)
      });
    },
    // 关闭弹框处理
    closeDialog() {
      this.$emit("cancelCreateMark"); // 调用父组件方法
      this.$refs["disposeConfigsform"].resetFields(); //清空form表单
    },
    // 取消弹框回车确认事件
    beforeClose: (action, instance, done) => {
      if (action === "confirm") {
        // console.log('进入 action === confirm 条件');
        instance.$refs["confirm"].$el.onclick = (function (e) {
          // console.log('进入点击事件');
          e = e || window.event;
          if (e.detail !== 0) {
            done();
          }
        })();
      } else {
        done();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  // display: none;
  width: 2px;
  height: 10px;
}
div::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
  background: #333;
}
::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
::-webkit-scrollbar-corner {
  background: #179a16;
}
.pointerEventsClue {
  pointer-events: none;
}
.inputclass {
  pointer-events: auto;
}
.createclue::v-deep.el-dialog__wrapper {
  overflow-y: hidden;
  margin: auto;
}
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
.newclue::v-deep.el-button {
  width: 100%;
  padding: 7px 15px;
  font-size: 15px;
  margin-top: 5px;
}
.nameedit {
  display: flex;
  justify-content: space-between;
}
::v-deep .el-table__body tr.current-row > td {
  // background-color: #69ea7f !important;
  background-color: transparent;
  // color: #fff;
}
</style>